<!--
 * 金额组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-amount class="amount" :amount="68"></pure-amount>
            <pure-gap></pure-gap>
            <pure-amount class="amount" :amount="68.6"></pure-amount>
            <pure-gap></pure-gap>
            <pure-amount class="amount" :amount="68.68"></pure-amount>
            <pure-gap></pure-gap>
            <pure-amount class="amount" :amount="6688.68"></pure-amount>
        </app-demo-module>

        <!-- 自定义符号 -->
        <app-demo-module title="自定义符号" desc="符号视觉对不齐的话需自行调整">
            <pure-amount class="amount" :amount="68" symbol="$"></pure-amount>
            <pure-gap></pure-gap>
            <pure-amount class="amount" :amount="68.6" symbol="€"></pure-amount>
            <pure-gap></pure-gap>
            <pure-amount class="amount" :amount="68.68" symbol="￡"></pure-amount>
        </app-demo-module>

        <!-- 补零 -->
        <app-demo-module title="补零到设置的精度">
            <pure-amount class="amount" padZero :amount="68"></pure-amount>
            <pure-gap></pure-gap>
            <pure-amount class="amount" padZero :amount="68.6"></pure-amount>
            <pure-gap></pure-gap>
            <pure-amount class="amount" padZero :amount="68.68" :precision="5"></pure-amount>
            <pure-gap></pure-gap>
            <pure-amount class="amount" padZero :amount="6688.68" :precision="5"></pure-amount>
        </app-demo-module>

        <!-- 舍弃末尾的0 -->
        <app-demo-module title="舍弃末尾的0">
            <pure-amount class="amount" amount="68.68000"></pure-amount>
            ➡️
            <pure-amount class="amount" amount="68.68000" dropZero></pure-amount>
        </app-demo-module>

        <!-- 数字大小一致 -->
        <app-demo-module title="数字大小一致">
            <pure-amount class="amount" :amount="68.68" mode="same-number"></pure-amount>
        </app-demo-module>

        <!-- 整体大小一致 -->
        <app-demo-module title="整体大小一致">
            <pure-amount class="amount" :amount="68.68" mode="same-all"></pure-amount>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";
</script>

<style scoped lang="scss">
    .amount {
        color: #ff0000;
        font-size: 18px;
    }
</style>
